<script lang='ts'>
import { ref, reactive } from "vue";
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    title: {
      type: String,
      default: "查看消息",
    },
    header: {
      type: String,
      default: "标题",
    },
    time: {
      type: String,
      default: "xxxx-xx-xx 00:00:00",
    },
    content: {
      type: String,
      default: "内容",
    },
  },

  setup() {
    const visible = ref<boolean>(false);
    const open = () => {
      visible.value = true;
    };
    return {
      visible,
      open,
    };
  },
});
</script>
<!-- 模型 -->
<template>
  <div class="">
    <el-dialog
      ref="dialog"
      v-model="visible"
      :title="title"
      width="36%"
      align-center
    >
      <div class="dialogContent">
        <h3>
          <slot name="header">{{ header }}</slot>
        </h3>
        <p>
          <slot name="time">{{ time }}</slot>
        </p>
        <hr />
        <p>
          <slot name="content">{{ content }}</slot>
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.dialogContent {
  padding: 10px;
  box-sizing: border-box;
  height: 300px;
  max-height: 300px;
}
.dialogContent p,
.dialogContent h3 {
  text-align: center;
  padding: 6px 0 15px;
}

.dialogContent p:nth-of-type(2) {
  text-align: left;
}

::v-deep .el-dialog__header {
  background-color: #2f3e4d;
  margin: 0;
  padding: 12px 20px;
}

:deep(.el-dialog__body) {
  padding: 0 12px 12px;
}

::v-deep .el-dialog__title {
  color: #fff;
}

:deep(.el-dialog__headerbtn) {
  top: 0;
}
</style>